<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router-3.6.5.js"></script>
</head>
<body>

<!--
        使用vue完成web项目开发   SPA  单页面化开发
        传统方案:   login.html  register.html  index.html  user.html ...
        SPA:       index.html  组件  login.vue  register.vue
                   <div id="app></div>  <-   vm
         /login       login.vue

        /register     register.vue

       如何实现根据用户访问路径不同  动态展示对应的组件到index.html ?
       vue  路由
       使用路由的基本步骤:
        1. 定义 (路由) 组件    login.vue    register.vue
        2. 定义路由
            每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象
        3. 创建 router 实例，然后传 `routes` 配置
       4. 创建和挂载根实例。
          记得要通过 router 配置参数注入路由， 从而让整个应用都有路由功能

-->
<!--初始化容器-->
<div id="app">
    <!-- 5. 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>



<script>

// 登录组件
const  login = {

    template:`
        <div>
            <h2>欢迎登录</h2>
            <form action="#" method="get">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="text" placeholder="请输入密码"></p>
                <p><input type="submit" value="登录"></p>
            </form>
        </div>
    `

}

// 注册组件
const  register = {
    template:`
        <div>
            <h2>欢迎注册</h2>
            <form action="#" method="get">
                <p><input type="text" placeholder="请输入用户名"></p>
                <p><input type="text" placeholder="请输入密码"></p>
                <p><input type="submit" value="注册"></p>
            </form>
        </div>
    `
}


// 2.定义路由  路由列表  定义路径和组件的对应关系
const  routes = [
    {
        path:'/login',     //  路径
        component: login   // 组件
    },
    {
        path:'/register',
        component: register
    }
]

// 3. 创建路由实例
const  router =  new VueRouter({
    routes   // (缩写) 相当于 routes: routes
})


// 4.创建和挂载根实例

    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            login,
            register
        },
        router
      })

//  5. 可以使用路由

</script>


</body>
</html>